<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-input
          v-model="keyWord"
          placeholder="筛选部分订单"
          class="handle-input mr10"
          size="mini"
        ></el-input>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        ref="multipleTable"
        height="450px"
        size="mini"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column
          label="订单号"
          prop="orderCode"
          align="center"
        ></el-table-column>
        <el-table-column
          label="订单总额"
          prop="payment"
          align="center"
        ></el-table-column>
        <el-table-column
          label="收货人姓名"
          prop="receiverName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="收货人手机号"
          prop="receiverMobile"
          align="center"
        ></el-table-column>
        <el-table-column
          label="收货人地址"
          prop="receiverAddress"
          align="center"
        ></el-table-column>
        <el-table-column
          label="买家留言"
          prop="buyerMessage"
          align="center"
        ></el-table-column>
        <el-table-column label="订单状态" prop="state" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleUpdate(scope.row)" type="text" size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="total, prev, pager, next"
          :current-page="(current, this.size)"
          :page-size="size"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="updateVisible" width="400px">
      <el-form ref="updateForm" :model="updateForm" label-width="60px">
        <el-form-item label="用户名">
          <el-input v-model="updateForm.username" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="updateForm.password"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="updateForm.sex">
            <el-radio :label="0">女</el-radio>
            <el-radio :label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="updateForm.phoneNum"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="updateForm.email"></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="birth">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="updateForm.birth"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="签名">
          <el-input v-model="updateForm.introduction"></el-input>
        </el-form-item>
        <el-form-item label="地区">
          <el-input v-model="updateForm.location"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateVisible = false">取消</el-button>
        <el-button type="primary" @click="updateRow">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mixin } from '../mixins'
import { SPACE, selectPage, selectPageByWord, update } from '../api/baseApi'
export default {
  mixins: [mixin],
  data() {
    return {
      size: 5 // 页数
    }
  },
  computed: {
    // 计算当前表格中的数据
    data() {
      return this.tableData.slice((this.current, this.size - 1) * this.size, this.current, this.size * this.size)
    }
  },
  watch: {
    keyWord: function () {
      this.findRow()
    }
  },
  mounted() {
    this.findRow()
  },
  methods: {
    // 修改
    updateRow() {
      update(SPACE.order, this.updateForm).then(res => {
        if (res.state === 200) {
          this.showSuccess()
          this.findRow()
          this.updateVisible = false
        } else {
          console.log(res)
          this.showError()
        }
      })
    },
    // 查找列表
    async findRow() {
      if (this.keyWord === '') {
        selectPage(SPACE.order, this.current, this.size).then(res => {
          this.tableData = res.state === 200 ? res.data.records : []
        })
      } else {
        selectPageByWord(SPACE.order, this.current, this.size, this.keyWord).then(res => {
          this.tableData = res.state === 200 ? res.data.records : []
        })
      }
    }
  }
}

</script>

<style scoped>
</style>
